<template>
	<div id="index">
		<el-container>
			<el-header>
				<div class="headerBox"> 
					<el-row>
						<el-col :span="4">
							<div class="grid-content bg-purple logo">
								<img src="../../assets/img/logo.jpg" alt="">
							</div>
						</el-col>
						<el-col :span="13">
							<div class="grid-content bg-purple-light menu">
								<ul>
									<li @click="goIntrodunce">マキマキとは</li>
									<!-- <li>お問い合わせ</li>
									<li>よくあるご質問</li>
									<li>
										<i class="el-icon-search"></i>
									</li> -->
								</ul>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple loginBox">
								<span @click="goLogin" class="login">ログイン</span>
								<span @click="goSign" class="sign">新規登録</span>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-header>
			<el-main>
				<div class="banner">
					<el-carousel :interval="5000" arrow="always" height="714px">
						<el-carousel-item v-for="item in bannerImg" :key="item.id">
							<img :src="item.url" :alt="item.title">
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="serial-comics">
					<div class="title">
						<h1>連載マンガ</h1>
						<p>Serial comics</p>
					</div>
					<div class="comics-box">
						<ul>
							<li v-for="(item,index) in serialData" :key="index">
								<div>
									<img :src="item.url" :alt="item.title">
								</div>
								<div>
									<h4> {{ item.title }} </h4>
									<span>
										<i class="el-icon-user"></i>
										<font>{{item.author}}</font>
									</span>
									<span>
										<i class="el-icon-edit"></i>
										<font>{{item.edit}}</font>
									</span>
									<span>
										<i class="el-icon-reading"></i>
										<font>{{item.press}}</font>
									</span>
								</div>
							</li>
						</ul>
						<div>
							<span>もっと見る</span>
						</div>
					</div>
				</div>
				<div class="system-service">
					<div class="title">
						<h2>マッチング情報</h2>
					</div>
					<div class="content">
						<p>
							<b>89</b>
							<span>本日のマッチング数</span>
						</p>
						<p>
							<b>78</b>
							<span>今週のマッチング数</span>
						</p>
						<p>
							<b>234</b>
							<span>今月のマッチング数</span>
						</p>
					</div>
				</div>
				<div class="new-project">
					<div class="title">
						<h1>新しいプロジェクト</h1>
						<p>New project</p>
					</div>
					<div class="project-box">
						<ul>
							<li v-for="(item,index) in newProject" :key="index">
								<div class="img-box">
									<img :src="item.url" alt="">
								</div>
								<div class="content">
									<h4> {{ item.title }} </h4>
									<span>
										<i class="el-icon-user"></i>
										<font>{{item.author}}</font>
									</span>
									<span>
										<i class="el-icon-edit"></i>
										<font>{{item.edit}}</font>
									</span>
									<span>
										<i class="el-icon-reading"></i>
										<font>{{item.press}}</font>
									</span>
								</div>
							</li>
						</ul>
						<div>
							<span>もっと見る</span>
						</div>
					</div>
				</div>
			</el-main>
			<el-footer>
				<div>
					<div>
						<b>Copyright © 2022     </b>
						<b>トライ・ドリーム株式会社</b>
					</div>
					<div>
						<span>
							<i class="el-icon-position"></i>
						</span>
						<span>
							<i class="el-icon-star-off"></i>
						</span>
					</div>
				</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
// import service from '@/service'
// import utils from '@/assets/js/utils'
export default {
    name: "home",
	data() {
		return {
			bannerImg: [
				// {url:require('../../assets/img/banner/1.png'),title:"111",id:1},
				// {url:require('../../assets/img/banner/2.png'),title:"222",id:2},
				{url:require('../../assets/img/banner/4.jpg'),title:"333",id:3}
			],
			serialData: [
				{
					id: 1,
					url:require('../../assets/img/1.jpg'),
					title: "夏目友人帐",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id:2,
					url:require('../../assets/img/2.jpg'),
					title: "火影忍者",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 3,
					url: require('../../assets/img/3.jpg'),
					title: "死神",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 4,
					url: require('../../assets/img/4.jpg'),
					title: "死神",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 1,
					url:require('../../assets/img/1.jpg'),
					title: "夏目友人帐",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id:2,
					url:require('../../assets/img/2.jpg'),
					title: "火影忍者",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 3,
					url: require('../../assets/img/3.jpg'),
					title: "死神",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 4,
					url: require('../../assets/img/4.jpg'),
					title: "死神",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				}
			],
			newProject: [
				{
					id:2,
					url:require('../../assets/img/2.jpg'),
					title: "火影忍者",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 4,
					url: require('../../assets/img/4.jpg'),
					title: "海贼王",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id:2,
					url:require('../../assets/img/2.jpg'),
					title: "火影忍者",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 4,
					url: require('../../assets/img/4.jpg'),
					title: "海贼王",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				}
			]
		}
	},
	mounted() {	
		
	},
	methods: {
		handleSelect(item) {
			
		},
		goSign() {
			this.$router.push('/sign')
		},
		goLogin() {
			this.$router.push('/login')
		},
		goIntrodunce() {
			this.$router.push('/introduce')
		}
	}

}
</script>
<style lang="scss" scoped>
	#index {
		width: 100%;
		height: auto;
		.el-container {	
			.el-header {
				height: 110px !important;
				padding: 0;
				.headerBox {
					width: 77%;
					margin: 0 auto;
					flex-wrap: nowrap;
					align-items: center;
					height: 100%;
					line-height: 100%;
					.el-row {
						height: 100%;
						>div {
							height: 100%;
							.logo {
								display: flex;
								align-items: center;
								height: 100%;
								img {
									width: 50%;
									// object-fit: none;
								}
							}
							.menu {
								display: flex;
								align-items: center;
								height: 100%;
								justify-content: flex-end;
								ul {
									display: flex;
									align-items: center;
									li {
										@media (max-width:1024px) {
											font-size: 16px;
											padding: 0 22px;
										}
										font-size: 20px;
										padding: 0 35px;
										cursor: pointer;
										i {
											font-size: 28px;
										}
									}
								}
							}
							.loginBox {
								display: flex;
								align-items: center;
								justify-content: flex-end;
								height: 100%;
								span {
									@media (max-width:1024px) {
										font-size: 16px;
										height: 35px;
										line-height: 35px;
										width: 80px;
									}
									display: block;
									width: 124px;
									height: 50px;
									border-radius: 25px;
									text-align: center;
									line-height: 50px;
									font-size: 20px;
									cursor: pointer;
								}
								.login {
									background: #F03747;
									color: #fff;
									margin-right: 20px;
								}
								.sign {
									background: #FFFFFF;
									border: 2px solid #F03747;
									color: #F03747;
								}
							}
							.search {
								display: flex;
								align-items: center;
								justify-content: center;
								height: 100%;
								i {
									font-size: 28px;
									cursor: pointer;
								}
							}
						}
					}
				}
			}
			.el-main {
				padding: 0;
				.el-carousel__container {
					img {
						width: 100%;
						height: 100%;
					}
				} 
				.serial-comics {
					margin-top: 110px;
					.title {
						h1 {
							color: #37414E;
							text-align: center;
							font-size: 50px;
							width: 70%;
							margin: 0 auto;
							font-weight: 500;
						}
						h1:before,h1:after {
							content: "";
							width: 13%;
							height: 1px;
							background:#333;
							display: block;
							position: relative ;
						}
						h1:before {
							top: 36px;
							left: 25%;
							@media (max-width:1024px) {
								top: 36px;
								left: 18%;
							}
						}
						h1:after {
							top: -31px;
							right: -62%;
							@media (max-width:1024px) {
								top: -31px;
								right: -70%;
							}
						}
						p {
							text-align: center;
							color: #858B93;
							font-size: 30px;
							margin-top: 15px;
						}
					}
					.comics-box {
						width: 77%;
						margin: 0 auto;
						margin-top: 40px;
						ul {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							width: 100%;
							li {
								width: 23%;
								// margin-right: 24px;
								cursor: pointer;
								margin-bottom: 30px;
								box-sizing: border-box;
								// @media (max-width:1024px) {
								// 	width: 22%;
								// 	margin-right: 22px;
								// }
								>div:first-child {
									border: 1px solid #e2e2e2;
									height: 230px;
									@media (max-width:1024px) {
										height: 180px;
									}
									img {
										width: 100%;
										max-height: 230px;
										object-fit: none;
										@media (max-width:1024px) {
											width: 100%;
											height: 100%;
											object-fit: none;
										}
									}
								}
								>div:last-child {
									border: 1px solid #E2E2E2;
									padding: 10px;
									h4 {
										height: 30px;
										line-height: 30px;
										font-size: 20px;
										font-weight: 500;
									}
									span {
										display: inline-block;
										margin-top: 7px;
										margin-right: 14px;
										i {
											font-size: 14px;
											margin-right: 4px;
											color: #999999;
										}
										font {
											font-size: 14px;
											color: #999999;
										}
									}
								}
							}
							li:nth-child(8) {
								margin-right: 0px !important;
							}
							li:hover {
								box-shadow:5px 5px 17px #ddd ;
							}
						}
						>div {
							display: flex;
							justify-content: center;
							margin-top: 30px;
							span {
								display: block;
								width: 271px;
								height: 81px;
								line-height: 81px;
								background: #FFFFFF;
								border: 1px solid #999999;
								border-radius: 40px;
								text-align: center;
								color: #333;
								font-size: 30px;
								cursor: pointer;
							}
						}
					}
				}
				.system-service {
					width: 100%;
					height: 411px;
					background-color: #142D41;
					margin: 110px 0;
					color: #fff;
					>div.title {
						h2 {
							text-align: center;
							font-size: 65px;
							font-weight: 500;
							line-height: 220px;
							opacity: 0.8;
							letter-spacing: 8px;
							margin-top: 34px;
						}
					}

					>div.content {
						width: 77%;
						margin: 0 auto; 
						display: flex;
						justify-content: space-between;
						p {
							text-align: center;
							b {
								display: block;
								font-size: 50px;
								font-weight: bold;
								letter-spacing: 3px;
								margin-bottom: 23px;
							}
							span {
								font-size: 20px;
								font-weight: normal;
								letter-spacing: 3px;
							}
						}
					}
				}
				.new-project {
					width: 100%;
					.title {
						h1 {
							color: #37414E;
							text-align: center;
							font-size: 50px;
							width: 70%;
							margin: 0 auto;
							font-weight: 500;
						}
						h1:before,h1:after {
							content: "";
							width: 13%;
							height: 1px;
							background:#333;
							display: block;
							position: relative ;
						}
						h1:before {
							top: 36px;
							left: 25%;
							@media (max-width:1024px) {
								top: 36px;
								left: 18%;
							}
						}
						h1:after {
							top: -31px;
							right: -62%;
							@media (max-width:1024px) {
								top: -31px;
								right: -70%;
							}
						}
						p {
							text-align: center;
							color: #858B93;
							font-size: 30px;
							margin-top: 10px;
						}
					}
					.project-box {
						width: 77%;
						margin: 0 auto;
						margin-top: 40px;
						ul {
							display: flex;
							justify-content: space-between;
							li {
								position: relative;
								width: 23%;
								height: auto;
								// height: 460px;
								// margin-right: 38px;
								
								>div.img-box {
									position: relative;
									img {
										width: 100%;
										height: 100%;
										max-height: 460px;
										object-fit: none;
									}
									@media (max-width:1024px) {
										height: 300px;
										img {
											width: 100%;
											max-height: 300px;
											object-fit: none;
										}
									}
								}
								.content {
									width: 100%;
									background-color:rgba($color: #000000, $alpha: 0.4) ;
									position: absolute;
									bottom: 1%;
									padding: 12px;
									box-sizing: border-box;
									color: #fff;
									@media (max-width:1024px) {
										bottom: 1%;
									}	
									h4 {
										font-size: 20px;
										font-weight: 500;
									}
									span {
										display: inline-block;
										margin-top: 7px;
										margin-right: 14px;
										i {
											font-size: 14px;
											margin-right: 4px;
											color: #fff;
										}
										font {
											font-size: 14px;
											color: #fff;
										}
									}
								}
							}
							li:last-child {
								margin-right: 0 !important;
							}
						}
						>div {
							display: flex;
							justify-content: center;
							margin-top: 60px;
							span {
								display: block;
								width: 271px;
								height: 81px;
								line-height: 81px;
								background: #FFFFFF;
								border: 1px solid #999999;
								border-radius: 40px;
								text-align: center;
								color: #333;
								font-size: 30px;
								cursor: pointer;
							}
						}
					}
				}
			}
			.el-footer {
				margin-top: 100px;
				padding: 0;
				background-color: #454648;
				height: 130px !important;
				>div {
					display: flex;
					align-items: center;
					width: 77%;
					height: 100%;
					margin: 0 auto;
					>div:first-child {
						color: #fff;
						flex: 1;
						b {
							font-size: 24px;
						}
						span {
							color: #8d8d8d;
							font-size: 16px;
							margin-left: 10px;
						}
					}
					>div:last-child {
						span {
							display: inline-block;
							width: 46px;
							height: 46px;
							border: 5px solid #656566;	
							border-radius: 50%;
							margin-left: 40px;
							text-align: center;
							position: relative;
							i {
								color:#656566 ;
								font-size: 30px;
								position: relative;
								top: 10px;
								left: -2px;
							}
						}
						span:last-child {
							i {
								top: 7px;
								left: 0px
							}
						}
					}
				}
			}
		}
	}
	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}
  
	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}
  
	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>